<template>
    <div>
        <qt-page-header :buttons="headerButtons" />
        <qt-page-table ref="table" :buttons="buttons" :columns="columns" @selection="selection" />
    </div>
</template>

<script>
import config from './config';

export default {
    name: `${config.model}List`,

    data() {
        return {
            id: null,
            config
        };
    },

    provide() {
        return {
            $list: this
        };
    },

    created() {
        this.setTab();
    },

    computed: {
        headerButtons() {
            return [
                {
                    code: 'add',
                    name: '新增',
                    prefixIcon: 'el-icon-plus',
                    visible: true,
                    disabled: false,
                    callback: () => {
                        this.create();
                    }
                }
            ];
        },

        buttons() {
            return [
                [
                    {
                        code: 'refresh',
                        name: '刷新',
                        prefixIcon: 'el-icon-refresh',
                        visible: true,
                        disabled: false,
                        callback: () => {
                            this.$refs.table.refresh();
                        }
                    },
                    {
                        code: 'add',
                        name: '新增',
                        prefixIcon: 'el-icon-plus',
                        visible: true,
                        disabled: false,
                        callback: () => {
                            this.create();
                        }
                    },
                    {
                        code: 'edit',
                        name: '编辑',
                        prefixIcon: 'el-icon-edit',
                        visible: true,
                        disabled: false,
                        type: 'single',
                        callback: () => {
                            this.$multRun.addRouter(this.config.editorPath + this.id, this.config.editorCompName, this.id);
                        }
                    }
                ]
            ];
        },

        columns() {
            return [
                { type: 'seq', width: 50, align: 'center' },
                { type: 'checkbox', width: 40 },
                {
                    field: 'id',
                    title: '单号',
                    width: 150,
                    router: {
                        field: 'id',
                        callback: row => {
                            this.$multRun.addRouter(this.config.editorPath + row['id'], this.config.editorCompName, row['id']);
                        }
                    },
                    headerFilter: 'textFilter'
                },
                {
                    field: 'name',
                    title: '货主',
                    width: 120,
                    headerFilter: 'selectFilter',
                    filterOptions: [
                        {
                            label: '新建',
                            value: '10'
                        },
                        {
                            label: '审核',
                            value: '20'
                        },
                        {
                            label: '提交',
                            value: '30'
                        },
                        {
                            label: '部分加工',
                            value: '40'
                        }
                    ]
                },
                { field: 'date', title: '开始时间', headerFilter: 'timeFilter' },
                { field: 'address', title: '地址', headerFilter: 'textFilter' }
            ];
        }
    },

    methods: {
        setTab() {
            this.$mytab.set(this.config.model + this.$route.path, {
                name: config.model,
                path: '/' + config.model,
                compName: this.$options.name
            });
        },

        selection(value) {
            if (value.length > 0) {
                this.id = value[0].id;
            }

            console.log(value);
        },

        create() {
            this.$router.push(this.config.createPath);
        }
    }
};
</script>